<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <jsp:include page="commons/static.jsp" />
    <link type="text/css" rel="stylesheet" href="/static/css/userForm.css">
</head>
<body>

<jsp:include page="commons/header.jsp" />

<form class="userForm" action="/blog/user/register" method="POST">

    <h4> 用户注册 </h4>

    <div>
        <label for="">账户</label>
        <input type="text" name="username">
    </div>

    <div>
        <label for="">密码</label>
        <input type="password" name="password">
    </div>

    <div>
        <label for="">昵称</label>
        <input type="text" name="nickname">
    </div>

    <div>
        <button type="submit">注册</button>
    </div>


</form>
</body>
<script src="/static/lib/jquery.min.js"></script>
<script src="/static/lib/layer/layer.js"></script>
<script>
    $(function (){
        $("input[name='username']").blur(function (){
            let yhm = $(this).val();
            $.ajax({
                type: "GET",
                url: "/blog/user/check",
                data: {
                    action: "checkUsername",
                    username: yhm
                },
                dataType: "json",
                success: function (result){
                    let input =  $("input[name='username']");
                    if(result.code != 0){
                        input.addClass("error");
                        input.focus();
                        layer.msg(result.message, function(){});
                    }else{
                        input.removeClass("error");
                    }
                }
            });

        });
    });

</script>
</html>